<template>
  <el-dialog
    title="导入"
    :visible="visible"
    width="500px"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    destroy-on-close
    @close="closeAction"
    append-to-body
  >
    <el-form ref="importForm" label-width="120px" :model="importForm">
      <el-form-item
        label="设备类型："
        prop="deviceType"
        :rules="[{ required: true, message: '请选择设备类型' }]"
      >
        <el-select
          class="full"
          v-model="importForm.deviceType"
          placeholder="请选择"
        >
          <el-option
            :label="item.name"
            :value="item.id"
            v-for="(item, key) in typeList"
            :disabled="item.id == '1001' && isChildren == 1"
            :key="key"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        label="产品："
        prop="productId"
        :rules="[{ required: true, message: '请选择产品' }]"
      >
        <el-select
          class="full"
          v-model="importForm.productId"
          placeholder="请选择"
        >
          <el-option
            :label="item.name"
            :value="item.id"
            v-for="(item, key) in productList"
            :key="key"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        label="文件："
        prop="fileName"
        :rules="[{ required: true, message: '请选择文件' }]"
      >
        <el-upload
          ref="upload"
          :action="config.baseApi + '/uploadFile/deviceImport'"
          :limit="1"
          accept=".xlsx"
          :show-file-list="false"
          :on-success="importSuccess"
          :on-change="importChange"
          :on-error="importError"
          :before-upload="beforeFileUpload"
          :headers="{
            Authorization: 'Bearer ' + siteInfos.token,
          }"
          :auto-upload="false"
          :data="importData"
        >
          <el-button size="small" type="green">点击上传</el-button>
          <span class="ml-10">{{ importForm.fileName }}</span>
        </el-upload>
      </el-form-item>
    </el-form>
    <div slot="footer">
      <el-button type="cancel" @click="closeAction">取消</el-button>
      <el-button
        type="primary"
        :loading="uploading"
        @click="submitUpload"
        :disabled="!$store.getters.hasEditPermission"
      >
        确定
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
import { mapState } from "vuex";
import utils from "@/assets/js/utils";
import UltrasonicNew from "@/components/equipment/UltrasonicNew.vue";
export default {
  name: "Group",
  components: {
    UltrasonicNew,
  },
  props: {
    visible: {
      type: Boolean,
    },
    business: {
      type: Object,
      required: true,
    },
    deviceClassify: {
      type: String,
      required: true,
    },
    isChildren: {
      type: Number,
    },
  },
  computed: {
    ...mapState(["siteInfos"]),
    importData() {
      const {
        businessId,
        deviceClassify,
        deviceType,
        productId,
        isChildren,
        transDeviceCode,
      } = this.importForm;
      return {
        businessId,
        deviceClassify,
        deviceType,
        productId,
        isChildren,
        transDeviceCode,
        token: this.siteInfos.token,
      };
    },
  },
  data() {
    return {
      typeList: [],
      productList: [],
      importForm: {
        fileName: "",
      },
      uploading: false,
    };
  },
  created() {
    this.importForm.businessId =
      this.siteInfos.userType == 1 ? this.business.id : this.siteInfos.homeId;
    this.importForm.deviceClassify = this.deviceClassify;
    this.importForm.isChildren = this.isChildren;
    this.importForm.transDeviceCode = this.business.number;
    this.getType();
    this.getProduct();
  },
  mounted() {},
  methods: {
    closeAction() {
      this.$emit("update:visible", false);
    },
    getType() {
      this.$get("/fireFightingIOT/device/deviceTypeList", {
        type: this.deviceClassify,
      }).then(
        (res) => {
          this.typeList = res.data;
        },
        (err) => {
          if (err.msg) {
            this.$message.error(err.msg);
          }
        }
      );
    },
    getProduct() {
      this.$get("/fireFightingIOT/device/productList", {
        type: this.deviceClassify,
      }).then(
        (res) => {
          this.productList = res.data;
        },
        (err) => {
          if (err.msg) {
            this.$message.error(err.msg);
          }
        }
      );
    },
    beforeFileUpload() {
      this.uploading = true;
    },
    importChange(file) {
      this.importForm.fileName = file.name;
    },
    importSuccess(res, file) {
      this.uploading = false;
      if (res.code == 0) {
        this.$message.success("导入成功");
        this.$emit("success");
        this.closeAction();
      } else {
        this.$message.error(res.msg);
      }
    },
    importError(err, file, fileList) {
      this.uploading = false;
    },
    submitUpload() {
      if (this.isChildren !== 1) {
        delete this.importData.isChildren;
        delete this.importData.transDeviceCode;
      }
      this.$refs["importForm"].validate((valid) => {
        if (valid) {
          this.$refs.upload.submit();
        }
      });
    },
  },
};
</script>
